<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>熔断测试</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="/announcements">校园公告系统</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="/announcements">公告列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/announcements/add">新增公告</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/lb-test">负载均衡测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/feign-test">OpenFeign测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/circuit-test">熔断测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="http://127.0.0.1:9411/" target="_blank">链路跟踪</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3>熔断测试页面</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group mb-3">
                            <input type="text" id="searchInput" class="form-control" placeholder="请输入公告关键词...">
                            <button class="btn btn-primary" type="button" id="searchButton">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            <h4 class="alert-heading">说明</h4>
                            <p>此页面用于测试服务的熔断和降级功能：</p>
                            <ul>
                                <li>使用实际的数据库查询公告信息</li>
                                <li>当数据库查询出现问题时会触发熔断</li>
                                <li>熔断后会返回降级响应</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="result" class="mt-4">
                    <!-- 结果将在这里显示 -->
                </div>
                <div id="pagination" class="mt-3">
                    <!-- 分页控件将在这里显示 -->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentPage = 0;
            const pageSize = 10;

            function displayResults(data) {
                if (data.error) {
                    $('#result').html(
                        '<div class="alert alert-danger">' +
                        '<h4 class="alert-heading">错误！</h4>' +
                        '<hr>' +
                        '<p>' + data.message + '</p>' +
                        '</div>'
                    );
                    $('#pagination').empty();
                    return;
                }

                if (data.content && data.content.length > 0) {
                    let resultHtml = '<div class="list-group">';
                    data.content.forEach(announcement => {
                        resultHtml += '<div class="list-group-item">';
                        resultHtml += '<div class="d-flex w-100 justify-content-between">';
                        resultHtml += '<h5 class="mb-1">' + announcement.title + '</h5>';
                        resultHtml += '<small>' + new Date(announcement.publishDate).toLocaleString() + '</small>';
                        resultHtml += '</div>';
                        resultHtml += '<p class="mb-1">' + announcement.content + '</p>';
                        resultHtml += '<small>作者：' + announcement.author + '</small>';
                        resultHtml += '</div>';
                    });
                    resultHtml += '</div>';
                    $('#result').html(resultHtml);

                    // 显示分页
                    let paginationHtml = '<nav><ul class="pagination justify-content-center">';
                    
                    // 上一页按钮
                    paginationHtml += '<li class="page-item' + (data.currentPage === 0 ? ' disabled' : '') + '">';
                    paginationHtml += '<a class="page-link" href="#" data-page="' + (data.currentPage - 1) + '">上一页</a></li>';
                    
                    // 页码按钮
                    for (let i = 0; i < data.totalPages; i++) {
                        paginationHtml += '<li class="page-item' + (i === data.currentPage ? ' active' : '') + '">';
                        paginationHtml += '<a class="page-link" href="#" data-page="' + i + '">' + (i + 1) + '</a></li>';
                    }
                    
                    // 下一页按钮
                    paginationHtml += '<li class="page-item' + (data.currentPage >= data.totalPages - 1 ? ' disabled' : '') + '">';
                    paginationHtml += '<a class="page-link" href="#" data-page="' + (data.currentPage + 1) + '">下一页</a></li>';
                    
                    paginationHtml += '</ul></nav>';
                    $('#pagination').html(paginationHtml);
                } else {
                    $('#result').html(
                        '<div class="alert alert-warning">' +
                        '<h4 class="alert-heading">未找到结果</h4>' +
                        '<hr>' +
                        '<p>没有找到匹配的公告</p>' +
                        '</div>'
                    );
                    $('#pagination').empty();
                }
            }

            function performSearch(page = 0) {
                const searchQuery = $('#searchInput').val().trim();
                const button = $('#searchButton');
                button.prop('disabled', true);
                button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 搜索中...');
                
                $.ajax({
                    url: '/circuit-test/search',
                    method: 'GET',
                    data: { 
                        query: searchQuery,
                        page: page,
                        size: pageSize
                    },
                    success: function(response) {
                        const data = typeof response === 'string' ? JSON.parse(response) : response;
                        displayResults(data);
                        currentPage = page;
                    },
                    error: function(xhr, status, error) {
                        $('#result').html(
                            '<div class="alert alert-danger">' +
                            '<h4 class="alert-heading">错误！</h4>' +
                            '<hr>' +
                            '<p>请求失败：' + error + '</p>' +
                            '</div>'
                        );
                        $('#pagination').empty();
                    },
                    complete: function() {
                        button.prop('disabled', false);
                        button.html('<i class="bi bi-search"></i> 搜索');
                    }
                });
            }

            // 点击搜索按钮时执行搜索
            $('#searchButton').click(function() {
                performSearch(0);
            });

            // 在输入框中按回车键时也执行搜索
            $('#searchInput').keypress(function(e) {
                if (e.which == 13) {
                    performSearch(0);
                }
            });

            // 点击分页按钮时执行搜索
            $(document).on('click', '#pagination .page-link', function(e) {
                e.preventDefault();
                const page = $(this).data('page');
                performSearch(page);
            });
        });
    </script>
</body>
</html> 